<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建一个全局唯一的Modal</title>
    <style>
        #modal {
            width: 300px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-sizing: border-box;
            border: 1px red solid;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <button id="open">打开modal</button>
    <button id="close">关闭modal</button>
    <script>
        document.getElementById('open').addEventListener('click', function () {
            const modal = createModal()
            modal.style.display = 'block'
        })
        document.getElementById('close').addEventListener('click', function () {
            const modal = createModal()
            if (modal) {
                modal.style.display = 'none'

            }
        })

        const createModal = (function () {
            let modal = null
            return function () {
                if (!modal) {
                    modal = document.createElement('div')
                    modal.innerHTML = 'hello world'
                    modal.id = 'modal'
                    modal.style.display = 'none'
                    document.body.appendChild(modal)
                }
                return modal
            }
        })()
    </script>
    <script>
        class Modal {
            constructor() {
                let modal = null
                modal = document.createElement('div')
                modal.innerHTML = 'hello world'
                modal.id = 'modal'
                modal.style.display = 'none'
                document.body.appendChild(modal)
                return modal
            }
            static getInstance() {
                if (!Modal.instance) {
                    Modal.instance = new Modal()
                }
                return Modal.instance
            }
        }
        document.getElementById('open').addEventListener('click', function () {
            const modal = Modal.getInstance()
            modal.style.display = 'block'
        })
        document.getElementById('close').addEventListener('click', function () {
            const modal = Modal.getInstance()
            if (modal) {
                modal.style.display = 'none'

            }
        })
    </script>


    <script>
        // 实现一个storage
        class Storage {
            static getInstance() {
                if (!Storage.instance) {
                    Storage.instance = new Storage()
                }
                return Storage.instance
            }
            get(key) {
                return localStorage.getItem(key)
            }
            set(key, item) {
                return localStorage.setItem(key, item)
            }
        }
        const storage1 = Storage.getInstance()
        const storage2 = Storage.getInstance()
        storage1.set('name', '李雷')
        console.log(storage1.get('name'))
        console.log(storage2.get('name'))
        console.log(storage1 === storage2)
    </script>
</div>
</body>
</html>
